<template>
  <section class="more">
    <Header 
            cname="header"
            :back=true
            @onBack="onBack" 
            @onSearch="onSearch" 
            @onMenu="onMenu">
            <span>{{more.title}}</span>
          </Header>
    <ul class="more-box">
      <li v-for="item in more.comics" :key="item.cid">
        <ComicL :comic="item" @onTapComic="onTapComic"/>
      </li>
    </ul>
  </section>
</template>

<script>
import {Mixin} from '../../utils/mixin.js'
import Header from '../../components/common/Header.vue'
import ComicL from './ComicL.vue'

export default {
  mixins: [Mixin],
  components: {
    Header,
    ComicL
  },
  data() {
    return {
      more: {}
    }
  },
  created() {
    let _more = this.$route.query.id
    if ( _more ) {
      this.more = _more
    }
    console.log(_more)
  },
	methods: {
    onTapComic(cid) {
      console.log("点击了漫画 "+ cid)
      this.$router.push({path: `/comic/${cid}`});
    }
	}
}
</script>
<style lang="scss">
@import '../../assets/style/color.scss';
.more {
  width: 100%;
  .header {
    background-color: $color-bg-f;
  }
  .more-box {
    width: 100%;
    margin-top: 50px;
    box-sizing: border-box;
    padding: 0 10px 10px 10px;
    background-color: $color-bg-f;
    li {
      width: 100%;
      box-sizing: border-box;
      padding-bottom: 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      background-color: white;
      padding: 0.25rem;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
}
</style>
